<template>
    <el-button type="primary" v-if="auth('balanceEditLog')" @click="dialogVisible = true">手动变更余额
    </el-button>
    <el-dialog
        v-model="dialogVisible"
        title="修改技师余额"
        width="600"
        destroy-on-close
        @close="close"
    >
        <el-form ref="ruleFormRef" :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio value="4" label="4">增加余额</el-radio>
                    <el-radio value="5" label="5">减少余额</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="金额" prop="money">
                <el-input-number v-model="form.money" :precision="2" :step="0.1" :min="1" :max="1000"/>
            </el-form-item>
            <el-form-item label="备注" prop="memo">
                <el-input v-model="form.memo" :rows="4" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">关闭</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">修改</el-button>
            </div>
        </template>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%;height:500px" border :show-overflow-tooltip="true">
        <el-table-column prop="order_sn" label="订单号" width="250">
            <template #default="{row}">
                <span v-if="row.type == 4 ||row.type == 5 ">手动更改余额，无订单号</span>
            </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="130">
            <template #default="{row}">
                <el-tag v-if="row.type == 1" type="success">订单收入</el-tag>
                <el-tag v-if="row.type == 2" type="success">车费</el-tag>
                <el-tag v-if="row.type == 3" type="danger">提现</el-tag>
                <el-tag v-if="row.type == 4" type="warning">手动增加余额</el-tag>
                <el-tag v-if="row.type == 5" type="warning">手动减少余额</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="money" label="变更金额" width="120">
            <template #default="{row}">
                <span v-if="row.type == 1 || row.type==2 ||row.type==4 ">+{{ row.money }}</span>
                <span v-if="row.type == 3 || row.type==5 ">-{{ row.money }}</span>
            </template>
        </el-table-column>
        <!--        <el-table-column prop="before" label="变更前金额" width="150"/>-->
        <el-table-column prop="after" label="变更后金额" width="150"/>
        <el-table-column prop="memo" label="备注"/>
        <el-table-column prop="create_time" label="变更时间"/>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup lang="ts">

import {inject, reactive, ref, watch} from "vue";
import {addBalanceLog, getBalanceEditLog} from "/@/api/backend/technician";
import {ElMessage, FormInstance, FormRules} from "element-plus";

import {auth} from '/@/utils/common'

const props = defineProps({
    technician_id: {
        type: Number,
        default: 0
    }
})

watch(() => props.technician_id, (val) => {
    if (val > 0) {
        balanceEditLog(currentPage.value, pageSize.value)
    }

})


const tableData = ref();
const total = ref();
const balanceEditLog = (page: number, limit: number) => {
    getBalanceEditLog({technician_id: props.technician_id, page: page, limit: limit}).then(res => {
        console.log(" res.data.list", res.data.list)
        tableData.value = res.data.list
        total.value = res.data.total
    })
}


//分页
const currentPage = ref(1)
const pageSize = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    currentPage.value = 1
    pageSize.value = val
    balanceEditLog(currentPage.value, pageSize.value)
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    balanceEditLog(currentPage.value, pageSize.value)
}

//查看详情
const dialogVisible = ref(false)

const form = reactive({
    type: '4',
    money: 1,
    memo: '',
})


const rules = reactive<FormRules>({
    type: [
        {
            required: true,
            message: '类型为必填项！',
            trigger: 'blur',
        },
    ], money: [
        {
            required: true,
            message: '金额为必填项',
            trigger: 'change',
        },
    ],
    memo: [
        {required: true, message: '备注为必填项', trigger: 'blur'},
    ],
})
const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', form)
            //提交表单
            addBalanceLog({
                technician_id: props.technician_id,
                type: form.type,
                money: form.money,
                memo: form.memo
            }).then(res => {
                if (res.code != 1) {
                    ElMessage.error(res.msg)
                }
                ElMessage.success(res.msg)
                balanceEditLog(currentPage.value, pageSize.value)
                form.type = '4'
                form.money = 1
                form.memo = ""
                dialogVisible.value = false
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const close = () => {
    form.type = '4'
    form.money = 1
    form.memo = ""
    dialogVisible.value = false
}
</script>
<style scoped lang="scss">
.el-table {
    margin-top: 10px;
}
</style>
